<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="http://static.taycc.com/static/vue/vue.js"></script>
        <script src="http://static.taycc.com/static/vue/vue-router.js"></script>
    </head>
    <body>
        <div id="app">
            <tianye-test v-for="i in mylist" v-bind:m="i" v-bind:key="i.id"></tianye-test>
        </div>
    </body>
</html>
<script>
    // 定义一个模板
    Vue.component('tianye-test', {
        // todo-item 组件现在接受一个
        // "prop"，类似于一个自定义特性。
        // 这个 prop 名为 todo。
        props: ['m'],
        template: '<li>{{m.text}}</li>'
    })
    var app = new Vue({
        el: "#app",
        data: {
            mylist: [{
                    id: 0,
                    text: '蔬菜'
                },
                {
                    id: 1,
                    text: '水果'
                },
                {
                    id: 2,
                    text: '面包'
                },
                {
                    id: 3,
                    text: '牛奶'
                }

            ]
        }
    })
</script>
